<template>
	<!-- 树形框 -->
		<view class="box-infodd " style="width: 180px;">
			<view class="buts-box" v-if="headerShow">
				<view class="HTitle">
					{{hreaderTitle}}
				</view>
				<img class="text-right"
				v-if="showAdd"
				:src="but_img"
				@click="$common.noMultipleClicks('onlickAdd',onlickAdd)">
				</img>
				
				<img class="text-right"
				v-if="showUpdate"
				src="../../static/img/update_000.png"
				@click="$common.noMultipleClicks('onlickShowUpdate',onlickShowUpdate)">
				</img>
			</view>
			<view class="search-header" v-if="showSearch">
				<input type="text" 
				placeholder="输入关键字查找" 
				class="ivu-input"
				v-model="headerMenuNow.searchContent"
				@confirm="startSearch"
				@input="startSearch"
				>
				<img src="../../static/img/search-1.png" 
				class="headerMuneSearchImg" @click="$common.noMultipleClicks('startSearch',startSearch)"></img>
			</view>
			<view style="background-color: #f5f7fa;" class="menu-scroll" :style="showSearch? 'height: calc(100% - 130px);':''">
				
				<view class="el-tree-node__children">
			
					<view 
					v-for="(item,index) in headerList"
					:key="index"
					v-if="item.show==undefined || item.show==true"
					class="el-tree-node is-expanded is-focusable"
					>
					<!-- 大类 -->
						<view class="el-tree-node__content  treeitem" 
						 :class="yiji_headerMenuNow.index==index   ? 'headerMenuNow ':'el-tree-node__content-1 '"
						@click="$common.noMultipleClicks('headerMenuClick1',headerMenuClick1,index,item.id)"
						>
							<img class="jiantou" 
							:src="item.select==true ? '@../../static/img/bottom-jiantou.png':'@../../static/img/left-jiantou.png'">
							</img>
							<view>
							{{item.name}}
							</view>
							<!-- <img class="text-right"
							src="../../static/img/add1.png">
							</img> -->
						</view>
						<view  class="el-tree-node__children font12" v-if="item.select==true || zhankai==true">
							<view role="treeitem" class="treeitem"
							v-for="(items,indexs) in item.list"
							:key="indexs"
							v-if="items.show==undefined || items.show==true"
							>
								<!-- 小类货小分类 -->
								<view class="el-tree-node__content "
								:class="headerMenuNow.index==items.id ? 'headerMenuNow-2':'el-tree-node__content-2'"
								@click="$common.noMultipleClicks ('selectHeadBotton',selectHeadBotton,items.id)"
								>
									
									<view v-if="items.image && headerShow==true" class="justify alter" 
									@click="$common.noMultipleClicks('previewImage',previewImage,items.image)"
									>
									图
									</view>
									<view class="justify left10" >
									{{items.name}}
									</view>
									<view class="text-right absolute" v-if="items.count">
										{{items.count}}
									</view>
									<!-- <img class="text-right"
									src="../../static/img/delete1.png">
									</img> -->
								</view>
								
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	
</template>

<script>
	export default {
		name:"chong-login",
		model: {
			prop: "showPop",
			event: "change"
		},
		props: {
			headerShow:{
				type: Boolean,
				default: true
			},
			zhankai:{
				type: Boolean,
				default: false
			},
			hreaderTitle: {
				type: String,
				default: ''
			},
			headerList: {
				type: Array,
				default: []
			},
			showPop: {
				type: Boolean,
				default: false
			},
			AppBaseInfoIsWeChat: {//区分 仅微信端以及安装有微信的SDK(例如QQ)使用
				type: Boolean,
				default: false, 
			},
			but_img: {//传入右上角的按钮图片
				type: String,
				default: ''
			},
			showSearch:{//是否显示搜索框
				type: Boolean,
				default: false, 
			},
			showAdd:{//是否显示增加的按钮
				type: Boolean,
				default: false, 
			},
			showUpdate:{//是否显示刷新的按钮
				type: Boolean,
				default: false, 
			},
		},
		watch:{
			showPop(value){
				if(value){
					this.show();
				}else{
					this.close();
				}
			}	
		},
		created() {
	
		},
		data() {
			
			return {
			
				yiji_headerMenuNow:{
					index:-1,//当前选中的分类序号
					searchContent:'',//准备搜索内容
				},
				headerMenuNow:{
					index:-1,//当前选中的分类序号
					searchContent:'',//准备搜索内容
				},
			};
		},
		methods:{
			reset(){
				this.yiji_headerMenuNow.index = -1
				this.headerMenuNow.index = -1
			},
			/**
			 * 预览图片
			*/
			previewImage(imgUrl){
				var arr = []
				arr.push(imgUrl)
				uni.previewImage({
					current:0,
					urls:arr
				})
			},
			/**
			 * 点击增加按钮
			*/
			onlickAdd(){
			
				this.$emit('onAdd',{}) //(父组件中触发的事件名，要传的变量名)
			},
			/**
			 * 点击刷新按钮
			*/
			onlickShowUpdate(){
				this.$emit('onUpdate','') //(父组件中触发的事件名，要传的变量名)
			},
			/**
			 * 一级分类点击选中
			*/
			selectHeaderTop(id){
				this.$emit('selectHeaderTop',id) //(父组件中触发的事件名，要传的变量名)
			},
			/**
			 * 二级分类点击选中
			*/
			selectHeadBotton(id){
				this.headerMenuNow.index=id;
				this.$emit('selectHeadBotton',id) //(父组件中触发的事件名，要传的变量名)
			},
			/**
			 * 搜索后的按下按键，内容变化，点击搜索按钮 都会触发这个
			*/
			startSearch(e){
				var content = this.headerMenuNow.searchContent
				this.$emit('onSearch',this.headerMenuNow.searchContent) //(父组件中触发的事件名，要传的变量名)
				if(content==""){
					this.headerList.forEach((item, index) => {  
						item.list.forEach((items, indexs) => {  
							this.headerList[index].list[indexs].show = true
							//this.$set(this.headerList[index].list,indexs,this.headerList[index].list[indexs])
						}); 
						
						this.headerList[index].select = false
						this.headerList[index].show = true
						this.$set(this.headerList,index,this.headerList[index])
						 
					});
					return
				}
				
				this.headerList.forEach((item, index) => {  
					var includes = false
				    item.list.forEach((items, indexs) => {  
				        if (items.name.includes(content)) {  
				            //console.log(items.name);  
							this.headerList[index].list[indexs].show=true
							includes=true
				        }else{
							this.headerList[index].list[indexs].show=  false
							
						}
						//this.$set(this.headerList,index,this.headerList[index])
						
				    });  
					if(includes==false){
						this.headerList[index].show = false
					}else{
						this.headerList[index].select = true
					}
					this.$set(this.headerList,index,this.headerList[index])
				});
			},
			/**
			 * 分类选中、取消
			*/
			headerMenuClick1(index,id){
				var that = this
				that.headerList.forEach((item,i)=>{
					if(i==index){
						item.select = !item.select
						if(item.select == true){
							that.selectHeaderTop(id)
						}
						
					}else{
						item.select=false
					}
				})
				that.yiji_headerMenuNow.index = index
				
				that.$set(that.headerList,index,that.headerList[index])
				
			},
		}
	}
</script>

<style>
	.box-infodd{
		width: 100%;
		height: 100%;
		justify-content: center;
		align-items: center;
		background-color: rgb(255, 255, 255);
		box-shadow: rgb(192 192 192) 1px 1px 5px;
		overflow: hidden;
		border-right: solid 1px #eee;
		margin-left:10px;
	}
	.treeitem{
		position: relative;
		padding-left: 20px
	}
	.search-header{
		margin: 10px;
		display: flex;
		border: 1px solid #dcdee2;
		background-color: #fff;
	}
	.ivu-input{
		display: inline-block;
		width: calc(100% - 14px);
		height: 30px;
		line-height: 1.5;
		padding: 0px 7px;
		font-size: 14px;
		border-radius: 4px;
		color: #515a6e;
		background-color: #fff;
		background-image: none;
		position: relative;
		cursor: text;
	}
	.el-tree-node{
		border-bottom: solid 1px #b2b2b247;
	}
	.el-tree-node__children{
		background-color: #fff;
		font-size: 14px;
		line-height: 25px;
	}
	.el-tree-node__content{
		padding: 5px;
		display: flex;
	}
	.el-tree-node__content-2{
		/* padding-left: 36px; */
		/* border-bottom: solid 1px #f5f5f5; */
	}
	.headerMenuNow-2{
		background-color: #61B6EB;
		/* color: #fff; */
		/* padding-left: 36px; */
		/* margin: 5px 0px; */
		border-bottom: solid 1px #eee;
		
	}
	.el-tree-node__content-3{
		padding-left: 36px;
	}
	.el-tree-node__content-4{
		padding-left: 54px;
	}
	

	.headerMenuNow{
		background-color: #61B6EB;
		padding: 5px;
		/* margin-top: 5px ; */
		border-bottom: solid 1px #eee;
		
		font-weight: 600;
	}
	.el-tree-node__content:hover{
		background-color: #61B6EB;
		color: #fff;
	}
	.text-right{
		    /* position: absolute; */
		    /* right: 10px; */
		    border-radius: 8px;
		    text-align: center;
		    display: flex;
		    justify-content: center;
		    flex-direction: column;
		    color: #1b1b1b;
		    padding: 0px 5px;
		    font-size: 14px;
			width: 20px;
			height: 20px;
			/* top: 50%; */
			/* transform: translate(0%, -50%); */
			margin-left: auto;
			margin: auto;
	}
	.absolute{
		position: absolute;
		right: 10px;
	}
	.el-tree-node__content-1 {
	    padding: 5px;
	    background-color: #fff;
	    /* margin: 1px 0px; */
	    /* border-bottom: solid 1px #eee; */
	}
	.buts-box{
		/* padding: 10px; */
		border-bottom: solid 1px #d2d2d2;
		display: flex;
		justify-content: center;
		height: 46px;
	}
	.HTitle{
		font-size: 16px; 
		margin-left: 10px;
		color: black;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}
	
	
	
</style>